@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}
.container {
  display: flex;          /* 启用 Flexbox 布局 */
  gap: 10px;              /* 设置子元素之间的间距，默认为 0 */
  /* 可选：为子元素添加额外的对齐方式 */
  align-items: center;   /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐，或使用 'space-between' 等 */
}

.card-container {
  width: 600px;
  height: 200px; /* 高度自动适应内容 */
  margin: 0 auto; /* 居中对齐 */
  background: linear-gradient(to right, #1e3a8a, #14b8a6); /* 从蓝色到青色的渐变背景 */
  border-radius: 12px; /* 圆角边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  overflow: hidden; /* 隐藏溢出部分 */
  margin-bottom: 25px; /* 底部间距 */
  padding: 16px; /* 内边距 */
}

/*.card-container {*/
/*  max-height: 500px; !* 设置容器的最大高度，根据实际情况调整 *!*/
/*  overflow-y: auto; !* 允许垂直方向上的滚动 *!*/
/*  border: 1px solid #ddd; !* 可选，给容器加个边框，以便于视觉上分隔 *!*/
/*  padding: 10px; !* 可选，增加容器的内边距 *!*/
/*}*/

.card-content {
  margin-bottom: 14px; /* 每个记录之间的间距 */
  font-size: 14px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
  border-radius: 8px; /* 圆角边框 */
  color: #f0f0f0; /* 文字颜色 */
  text-align: center; /* 文本居中对齐 */
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: white;
  margin-bottom: 10px; /* 下边距 */
  margin-top: -10px;
}

.card-description {
  font-size: 16px;
  display: flex;
  flex-direction: column; /* 垂直排列内容 */
  align-items: center; /* 水平居中对齐 */
}




/* 记录项样式 */
.card-content {
  margin-bottom: 10px; /* 记录项之间的间距 */
}

/* 中奖记录标题 */
.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 奖品样式 */
.prize {
  color: #ff5722;
  font-weight: bold;
}

.user{
  color: #fff422;
}
/* 日期样式 */
/*.date {*/
/*  color: #11b2e3;*/
/*}*/

/* 动画关键帧定义 */
@keyframes scrollUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}

/* 记录列表容器样式 */
.record-list {
  overflow: hidden; /* 隐藏超出容器的内容 */
  height: 100%; /* 设置容器高度 */
  position: relative; /* 使容器相对定位 */
}

 /*记录项容器样式*/
.record-items {
  display: flex;
  flex-direction: column;
  animation: scrollUp 10s linear infinite; /* 动画时长和循环方式 */
  position: absolute; /* 使记录项绝对定位以适应动画 */
  width: 100%; /* 记录项宽度与容器宽度相同 */
}



.record-list {
  overflow: hidden; /* 隐藏溢出的内容 */
  height: 200px; /* 设置固定高度，根据实际情况调整 */
  position: relative;
}

.record-items {
  display: flex;
  flex-direction: column;
  animation: scrollUp 5s linear infinite; /* 动画时间与滚动速度 */
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.card-content {
  height: 50px; /* 每条记录的高度，根据实际情况调整 */
}


.info-container {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: auto;
  width: 620px;
}
.info-container p {
  margin: 0 0 10px;
  line-height: 1.6;
}
.info-container p:last-child {
  margin-bottom: 0;
}
.info-container .highlight {
  font-weight: bold;
  color: #333;
}
.info-container .label {
  color: red;
}

